<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="主机类型"></el-table-column>
                <el-table-column prop="sno" label="登录账号"></el-table-column>
                <el-table-column prop="class" label="IP地址"></el-table-column>
                <el-table-column prop="age" label="ip地址所在地"></el-table-column>
                <el-table-column prop="sex" label="登录时间"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts" name="export_log">
import { ref } from 'vue';
import * as XLSX from 'xlsx';

interface TableItem {
    id: number;
    name: string;
    sno: string;
    class: string;
    age: string;
    sex: string;
}

const tableData = ref<TableItem[]>([]);
// 获取表格数据
const getData = () => {
    tableData.value = [
      {
        "id": 1,
        "name": "ubuntu",
        "sno": "system",
        "class": "192.168.86.250",
        "age": "江苏南京",
        "sex": "2024-10-01 23:59:59"
      },
      {
        "id": 2,
        "name": "macOS",
        "sno": "user1",
        "class": "192.168.0.80",
        "age": "河北石家庄",
        "sex": "2024-09-24 23:59:59"
      },
      {
        "id": 3,
        "name": "arch",
        "sno": "admin",
        "class": "192.168.130.248",
        "age": "广东广州",
        "sex": "2024-09-18 23:59:59"
      },
      {
        "id": 4,
        "name": "windows",
        "sno": "system",
        "class": "192.168.74.159",
        "age": "广东广州",
        "sex": "2024-09-09 23:59:59"
      },
      {
        "id": 5,
        "name": "debian",
        "sno": "guest",
        "class": "192.168.247.180",
        "age": "浙江杭州",
        "sex": "2024-09-02 23:59:59"
      },
      {
        "id": 6,
        "name": "macOS",
        "sno": "root",
        "class": "192.168.180.61",
        "age": "浙江杭州",
        "sex": "2024-08-30 23:59:59"
      },
      {
        "id": 7,
        "name": "macOS",
        "sno": "root",
        "class": "192.168.143.165",
        "age": "河北石家庄",
        "sex": "2024-08-26 23:59:59"
      },
      {
        "id": 8,
        "name": "centOS",
        "sno": "operator",
        "class": "192.168.248.222",
        "age": "湖南长沙",
        "sex": "2024-08-20 23:59:59"
      },
      {
        "id": 9,
        "name": "fedora",
        "sno": "guest",
        "class": "192.168.82.215",
        "age": "江西赣州",
        "sex": "2024-08-15 23:59:59"
      },
      {
        "id": 10,
        "name": "debian",
        "sno": "superuser",
        "class": "192.168.206.181",
        "age": "广东广州",
        "sex": "2024-08-08 23:59:59"
      },
      {
        "id": 11,
        "name": "macOS",
        "sno": "user1",
        "class": "192.168.83.239",
        "age": "湖南长沙",
        "sex": "2024-08-06 23:59:59"
      },
      {
        "id": 12,
        "name": "fedora",
        "sno": "guest",
        "class": "192.168.173.227",
        "age": "浙江杭州",
        "sex": "2024-08-05 23:59:59"
      },
      {
        "id": 13,
        "name": "fedora",
        "sno": "user1",
        "class": "192.168.80.115",
        "age": "广东广州",
        "sex": "2024-08-02 23:59:59"
      },
      {
        "id": 14,
        "name": "centOS",
        "sno": "user1",
        "class": "192.168.8.73",
        "age": "四川成都",
        "sex": "2024-07-30 23:59:59"
      },
      {
        "id": 15,
        "name": "debian",
        "sno": "user1",
        "class": "192.168.60.150",
        "age": "河北石家庄",
        "sex": "2024-07-21 23:59:59"
      }
    ]
    ;
};
getData();

const list = [['序号', '姓名', '工号', '班级', '年龄', '性别']];
const exportXlsx = () => {
    tableData.value.map((item: any, i: number) => {
        const arr: any[] = [i + 1];
        arr.push(...[item.name, item.sno, item.class, item.age, item.sex]);
        list.push(arr);
    });
    let WorkSheet = XLSX.utils.aoa_to_sheet(list);
    let new_workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
    XLSX.writeFile(new_workbook, `表格.xlsx`);
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #f56c6c;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
